<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        #app {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 300px;
            text-align: center;
        }

        .el-textarea__inner {
            background-color: bisque;
        }

        .el-button {
            width: 100%;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-form :model="weibo" :rules="rules" ref="weiboForm">
        <el-form-item prop="content">
            <el-input type="textarea" :rows="5" placeholder="说点儿啥..." v-model="weibo.content"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('weiboForm')">发微博</el-button>
        </el-form-item>
    </el-form>
</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                weibo: { content: "" },
                rules: {
                    content: [
                        { required: true, message: '请输入微博内容', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // 发出发微博的请求
                        axios.post("/v1/weibo/insert", v.weibo).then(function (response) {
                            if (response.data === 1) {
                                location.href = "/"; // 回到首页
                            } else {
                                alert("请先登录!");
                                location.href = "/login.html";
                            }
                        }).catch(function (error) {
                            console.error(error);
                            alert("发微博失败，请稍后再试");
                        });
                    } else {
                        console.log('验证失败');
                        return false;
                    }
                });
            }
        }
    });
</script>
</html>
